<template>
    <div class="icon-body">
      <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons" size="small">
        <i slot="suffix" class="el-icon-search el-input__icon"></i>
      </el-input>
      <div class="icon-list">
        <div class="list-container">
          <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectIcon(item)">
            <div :class="['icon-item', { active: activeIcon === item }]">
              <svg-icon :icon="item" class-name="icon" style="height: 25px; width: 16px; margin-right: 5px;"/>
              <span>{{ item }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

<script>
import icons from './requireIcons'
export default {
  name: 'IconSelect',
  props: {
    activeIcon: {
      type: String
    }
  },
  data () {
    return {
      name: '',
      iconList: icons
    }
  },
  methods: {
    filterIcons () {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter(item => item.includes(this.name))
      }
    },
    selectIcon (name) {
      this.$emit('selectIcon', name)
      document.body.click()
    },
    reset () {
      this.name = ''
      this.iconList = icons
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-body {
  width: 100%;
  .icon-search {
    position: relative;
    margin-bottom: 5px;
  }
  .icon-list {
    height: 200px;
    overflow: auto;
    .list-container {
      display: flex;
      flex-wrap: wrap;
      .icon-item-wrapper {
        width: calc(100% / 3);
        height: 25px;
        line-height: 25px;
        cursor: pointer;
        display: flex;
        .icon-item {
          display: flex;
          max-width: 100%;
          height: 100%;
          padding: 0 5px;
          &:hover {
            background: #ececec;
            border-radius: 5px;
          }
          .icon {
            flex-shrink: 0;
          }
          span {
            display: inline-block;
            vertical-align: -0.15em;
            fill: currentColor;
            padding-left: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .icon-item.active {
          background: #ececec;
          border-radius: 5px;
        }
      }
    }
  }

  /* 修改滚动条的样式 */
  ::-webkit-scrollbar {
     /* 设置滚动条的宽度 */
    width: 8px;
    /* 设置滚动条的高度 */
    height: 8px;
  }

  /* 轨道 */
  ::-webkit-scrollbar-track {
    /* 设置滚动条轨道的背景颜色 */
    background-color: #f1f1f1;
  }

  /* 滑块 */
  ::-webkit-scrollbar-thumb {
    /* 设置滚动条的颜色 */
    background-color: #bebcbc;
    /* 设置滚动条的圆角 */
    border-radius: 5px;
  }

  /* 鼠标悬停时的滑块 */
  ::-webkit-scrollbar-thumb:hover {
    /* 设置鼠标悬停时滚动条的颜色 */
    background-color: #abaaaa;
  }
}
</style>
